﻿@model IEnumerable<MVC_No03.Models.Task>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        table td {
            width: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <td>TaskID</td>
                    <td>TaskPriority</td>
                    <td>Content</td>
                </tr>
            </thead>
            <thead>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.TaskID</td>
                        <td>@item.TaskPriority</td>
                        <td>@item.Content</td>
                        <td>
                            <button @@click="InfoClick(@item.TaskID)">详情</button>
                            <button @@click="DeleteClick(@item.TaskID)">删除</button>
                        </td>
                    </tr>
                }
            </thead>
        </table>
    </div>
    <script src="~/Scripts/vue.js"></script>
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script>
        var myVue = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                InfoClick: function (data) {
                    location = "/MyHome/GetArrInfo?uid=" + data;
                },
                DeleteClick: function (data) {
                    if (confirm("确定要删除" + data + "吗")) {
                        $.post("/MyHome/DeletePage", { uid: data }, function (jdata) {
                            switch (jdata.State) {
                                case 0:
                                    alert("删除失败");
                                    break;
                                case 1:
                                    alert("删除成功");
                                    location = "/MyHome/Index";
                                    break;
                            }
                        })
                    }
                }
            }
        });

            //(function () {
            //    $.post("/MyHome/GetArrInfo", {}, function (data) {
            //        console.log(data);
            //        myVue.$data.arr = data;
            //    })
            //})()
    </script>
</body>
</html>
